<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane
            :label="$t('config.site_settings')"
            class="form-tabs-tab-pane"
          >
            <!-- 站点状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_status')"
                  prop="site.status"
                >
                  <el-switch v-model="form.site.status" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_name')"
                  prop="site.name"
                >
                  <el-input
                    v-model="form.site.name"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_name')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点域名 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_domain')"
                  prop="site.domain"
                >
                  <el-input
                    v-model="form.site.domain"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_domain')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点标语 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_slogan')"
                  prop="site.slogan"
                >
                  <el-input
                    v-model="form.site.slogan"
                    :placeholder="$t('common.pleaseFill')+$t('config.site_slogan')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点关键词 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_keywords')"
                  prop="site.keywords"
                >
                  <jsp-tags
                    :data="form.site.keywords"
                    :limit="20"
                    @change=" (tags) => form.site.keywords = tags "
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点描述 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_description')"
                  prop="site.description"
                >
                  <el-input
                    v-model="form.site.description"
                    type="textarea"
                    :placeholder="$t('config.site_description_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点logo -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_logo_image')"
                  prop="site.logo_image"
                >
                  <jsp-image-upload
                    :default-list="site_logo_imageList"
                    @success="handleLogoUploadSuccss"
                    @change="handleLogoUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点二维码-->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_qrcode_image')"
                  prop="site.qrcode_image"
                >
                  <jsp-image-upload
                    :default-list="site_qrcode_imageList"
                    @success="handleQrcodeUploadSuccss"
                    @change="handleQrcodeUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点版权信息 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_copyright')"
                  prop="site.copyright"
                >
                  <el-input
                    v-model="form.site.copyright"
                    type="textarea"
                    :placeholder="$t('config.site_copyright_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点邮箱 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_email')"
                  prop="site.email"
                >
                  <el-input
                    v-model="form.site.email"
                    :placeholder="$t('config.site_email_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点客服热线 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_contact')"
                  prop="site.contact"
                >
                  <el-input
                    v-model="form.site.contact"
                    :placeholder="$t('config.site_contact_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 站点在线客服代码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_online_service_code')"
                  prop="site.online_service"
                >
                  <el-input
                    v-model="form.site.online_service"
                    type="textarea"
                    :placeholder="$t('config.site_online_service_code_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 站点统计代码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.site_statistics_code')"
                  prop="site.statistics_code"
                >
                  <el-input
                    v-model="form.site.statistics_code"
                    type="textarea"
                    :placeholder="$t('config.site_statistics_code_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('config.attachment_settings')" class="form-tabs-tab-pane">
            <!-- 上传类型 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_upload_allowext')"
                  prop="attachment.upload_allowext"
                >
                  <el-checkbox-group v-model="form.attachment.upload_allowext">
                    <el-checkbox label=".jpg" value="jpg" />
                    <el-checkbox label=".png" value="png" />
                    <el-checkbox label=".gif" value="gif" />
                    <el-checkbox label=".bmp" value="bmp" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 上传大小 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_upload_maxsize')"
                  prop="attachment.upload_maxsize"
                >
                  <el-input
                    v-model="form.attachment.upload_maxsize"
                    :placeholder="$t('config.attachment_upload_maxsize_tips')"
                    type="number"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 是否开启图片水印 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_is_watermark')"
                  prop="attachment.is_watermark"
                >
                  <el-switch v-model="form.attachment.is_watermark" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印图片路径 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_image')"
                  prop="attachment.watermark_image"
                >
                  <el-input
                    v-model="form.attachment.watermark_image"
                    :placeholder="$t('config.attachment_watermark_image_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 满足打水印宽度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="
                    $t('config.attachment_watermark_condition_width')
                  "
                  prop="attachment.watermark_condition_width"
                >
                  <el-input
                    v-model="form.attachment.watermark_condition_width"
                    :placeholder="$t('config.attachment_watermark_condition_width_tips')"
                    type="number"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 满足打水印高度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="
                    $t('config.attachment_watermark_condition_height')
                  "
                  prop="attachment.watermark_condition_height"
                >
                  <el-input
                    v-model="form.attachment.watermark_condition_height"
                    :placeholder="$t('config.attachment_watermark_condition_height_tips')"
                    type="number"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印透明度 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_pct')"
                  prop="attachment.watermark_pct"
                >
                  <el-input
                    v-model="form.attachment.watermark_pct"
                    :placeholder="$t('config.attachment_watermark_pct_tips')"
                    type="number"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 水印位置 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.attachment_watermark_position')"
                  prop="attachment.watermark_position"
                >
                  <el-radio-group v-model="form.attachment.watermark_position">
                    <el-radio :label="1">左上角</el-radio>
                    <el-radio :label="2">上居中</el-radio>
                    <el-radio :label="3">右上角</el-radio>
                    <el-radio :label="4">左居中</el-radio>
                    <el-radio :label="5">居中</el-radio>
                    <el-radio :label="6">左下角</el-radio>
                    <el-radio :label="7">下居中</el-radio>
                    <el-radio :label="8">右下角</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('config.login_settings')" class="form-tabs-tab-pane">
            <!-- 登录错误次数 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.login_fail_times')"
                  prop="login.login_fail_times"
                >
                  <el-input
                    v-model="form.login.login_fail_times"
                    :placeholder="$t('config.login_fail_times_tips')"
                    type="number"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 登录错误提示语 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('config.login_fail_tips')"
                  prop="login.login_fail_tips"
                >
                  <el-input
                    v-model="form.login.login_fail_tips"
                    :placeholder="$t('config.login_fail_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
              <!-- <el-button @click="onCancel">取消</el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'
import JspTags from '@/components/JspTags'

// export
export default {
  name: 'ConfigEdit',
  components: {
    JspImageUpload,
    JspTags
  },
  data() {
    return {
      form: {
        site: {
          status: 0,
          name: '',
          domain: '',
          slogan: '',
          keywords: [],
          description: '',
          logo_image: '',
          qrcode_image: '',
          copyright: '',
          statistics_code: '',
          statistics_codec: '',
          email: '',
          contact: '',
          online_service: ''
        },
        attachment: {
          upload_maxsize: '',
          upload_allowext: [],
          is_watermark: 0,
          watermark_image: '',
          watermark_condition_width: 0,
          watermark_condition_height: 0,
          watermark_pct: 0,
          watermark_position: 1
        },
        login: {
          login_fail_times: undefined,
          login_fail_tips: ''
        }
      },
      // 站点logo: 请求附件接口
      site_logo_imageList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        }
      ],
      // 站点二维码: 请求附件接口
      site_qrcode_imageList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        }
      ],
      rules: {},
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页或首页
      // 请求附件接口
      // await coding...
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** *********************************************** 表单相关 结束 ******************************************************/

    /** *********************************************** logo上传 开始 *****************************************************/
    handleLogoUploadSuccss(response, file, fileList) {
      console.log('上传logo成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handleLogoUploadChange(result) {
      console.log('logo改变事件', result)
      this.logo_image = this.ids
    },
    /** *********************************************** logo上传 结束 *****************************************************/

    /** *********************************************** 二维码上传 开始 ***************************************************/
    handleQrcodeUploadSuccss(response, file, fileList) {
      console.log('上传二维码成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handleQrcodeUploadChange(result) {
      console.log('二维码改变事件', result)
      this.qrcode_image = this.ids
    },
    /** *********************************************** 二维码上传 开始 ***************************************************/
    // 选择上级栏目
    parentCateChange(e) {
      // console.log(e);
      this.parent_id = e.checkedKeys
    }
  }
}
</script>

<style scoped lang="scss">
</style>
